<template>
  <div>
    <div style="display: flex; justify-content: flex-start; margin: 10px">
      <a-button type="primary" @click="editClass(null)">新增铁路</a-button>
      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <span  style="padding-top:6px">选择语言：</span>
        <a-select
            placeholder="请筛选语言"
            v-model="language"
            style="width:300px"
            @change="languageChanges"
          >
            <a-select-option :value="1">简体中文</a-select-option>
            <a-select-option :value="2">繁体</a-select-option>
            <a-select-option :value="3">英语</a-select-option>
            <a-select-option value="">全部</a-select-option>
          </a-select>
    </div>

    <a-table
      :columns="columns"
      :rowKey="(record) => record.bannerId"
      bordered
      :dataSource="dataTable"
      @change="tableChange"
      :pagination="{
        pageSize: form.size,
        total: totalPage,
        hideOnSinglePage: true,
        current: form.page,
      }"
    >
      <template slot="operation" slot-scope="text, row, index">
        <a-button size="small" type="primary" @click="editClass(row)"
          >编辑名称</a-button
        >
        <a-button size="small" type="primary" @click="editClassDetail(row)"
          >编辑详情</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 弹框 -->
    <a-modal
      title="信息详情"
      :visible="visibleDetails"
      @cancel="visibleDetails = false"
      cancelText="关闭"
      okText="确定"
      @ok="handleSubmit"
    >
      <a-form :form="formData">
        <a-form-item
          label="铁路名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input v-model="planDetails.routeName"></a-input>
        </a-form-item>
        <a-form-item
          label="语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            placeholder="请选择文章语言"
            v-model="planDetails.language"
            @change="languageChange"
          >
            <a-select-option :value="1">简体中文</a-select-option>
            <a-select-option :value="2">繁体</a-select-option>
            <a-select-option :value="3">英语</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    UploadImg,
  },
  data() {
    return {
      visibleDetails: false,
      dataTable: [],
      language:undefined,
      columns: [
        {
          title: "铁路名称",
          dataIndex: "routeName",
          align: "center",
          key: "routeName",
          scopedSlots: { customRender: "routeName" },
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender:function (text){
            if(text=='1'){
                return "简体中文";
            }else if(text=="2"){
                return "繁体";
            }else if(text=="3"){
                return "英语";
            }
            }
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" },
        },
      ],
      rowSelection: {
        hideDefaultSelections: true,
      },
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
      },
      totalPage: 0,
      showHOST: api.showHOST,
      radioType: 2,
      formData: this.$form.createForm(this),
      planDetails: {
        portId: "",
        routeName: "",
        language: "",
      },
      HOST: api.HOST,
    };
  },
  methods: {
    editClassDetail(row){
      this.$router.push("railwaysDetail?id="+row.railwayId);
    },
    languageChange(values) {
      this.planDetails.language = values;
    },
     languageChanges(values) {
      this.form.language = values;
      this.getPlan();
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    back() {},
    cancel(e) {
      this.$message.error("取消!");
    },
    getPlan() {
      api.getRailwayPage(this.form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.totalPage = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    editClass(row) {
      if (row != null) {
        this.planDetails = JSON.parse(JSON.stringify(row));
      } else {
        this.planDetails = {};
      }
      this.visibleDetails = true;
    },
    delPlan(row) {
      api
        .delRailway({
          ids: row.railwayId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getPlan();
          } else {
            this.$message.error(res.description);
          }
        });
    },
    handleSubmit() {
      this.planDetails.type=1;
      api.saveRailway(this.planDetails).then((res) => {
        if (res.code == 200) {
          this.visibleDetails = false;
          this.planDetails = {};
          this.$message.success("保存成功");
          this.getPlan();
        } else {
          this.$message.error(res.description);
        }
      });
    },
    tableChange(pagination, filters, sorter) {
      this.form.page = pagination.current;
      this.getPlan();
    },

    previewImage(file) {
      console.log(file);
      window.open(file.url);
    },
  },
  created() {
    this.getPlan();
  },
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
